<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Progress Bar Example</title>
	<link rel="stylesheet" type="text/css" href="./css/index.min.css">
	<style type="text/css">
		.box {
			width: 90%;
			margin: 15px auto;
		}
	</style>
</head>
<body>
<button onclick="change()">Random Length</button>
<select id="select1"></select><br><br>
<label>type: exceed(default), Max: 100(default), height: 12(default)</label>
<div id="box1" class="box"></div><br>
<label>type: success, Max: 120, height: 12(default)</label>
<div id="box2" class="box"></div><br>
<label>type: warning, Max: 160, height: 14</label>
<div id="box3" class="box"></div><br>
<label>type: danger, Max: 160, height: 16</label>
<div id="box4" class="box"></div><br>
<script type="text/javascript" src="./js/index.min.js"></script>
<script type="text/javascript">
	var cp1 = new ColorProgress('box1')
	var cp2 = new ColorProgress('box2', 'success', Math.floor(Math.random() * 120), 120)
	var cp3 = new ColorProgress('box3', 'warning', Math.floor(Math.random() * 160), 160, 14)
	var cp4 = new ColorProgress('box4', 'danger', Math.floor(Math.random() * 160), 160, 16)

	var types = ['exceed', 'success', 'warning', 'danger']
	var select = document.getElementById('select1')
	for (var index in types) {
		var option = document.createElement('option')
		option.innerHTML = types[index]
		select.appendChild(option)
	}
	select.onchange = function () {
		cp1.setType(types[select.selectedIndex])
	}
	var change = function () {
		cp1.setPercentage(Math.floor(Math.random() * 100))
		cp2.setPercentage(Math.floor(Math.random() * 120))
		cp3.setPercentage(Math.floor(Math.random() * 160))
		cp4.setPercentage(Math.floor(Math.random() * 160))
	}
</script>
</body>
</html>